<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>html title</title>

		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/animate/animate.css">
		<style>
			.titlebar, .tab.active {
				background-color: #18B2ED;
			}
			.titlebar h1, .tab.active label {
				font-weight: bold;
				color: white;
			}
			.titlebar a i, .titlebar a label {
				color: white;
			}
			.art_mid {
				top: 45px;
				bottom: 40px
			}
		    .option_button{
		    }
		    .option_icon{
		    	line-height:40px;
		    }

		</style>
	</head>
	<body>
		<div id="section_container">
			<section id="sectionid" data-role="section" class="active">
				<header>
					<div class="titlebar" >
						<a class="left"> <label class="bold"><i class="icon icon-arrowleft-fill"></i>登出</label> </a>
						<h1 class="text-center ">KOB</h2> <a class="right"> <i class="icon icon-menu-fill"></i> </a>
					</div>
				</header>
				<article id="article_main" data-role="article" data-transition="slide" data-scroll="verticle" class="active art_mid" >
					<div class="scroller">
						<ul class="list newlist">
						  <li>
						  	<div class="justify-content" style="width:45%;text-align:center;">
						  		<span class="photo bg-1 bold size30" id="selfname"></span>
						  	</div>
						  	<div class="justify-content" style="width:10%;line-height:45px;">
						  	  <span class="bold " style="color:red;font-size:1.2em;">VS</span>	</div>
						  	<div class="justify-content" style="width:45%;text-align:left;">
						  		<span class="photo bg-9 bold size30" id="enemyname"></span>
						  	</div>
						  </li>
						</ul>
						<div id="question_main">
						<div style="height:150px;">
							<span>{{quest_bean.title}}</span>
						</div>
						<ul class="list newlist">
						<li v-for="(option,idx) in quest_bean.options" class="" :key="option.id" @click="on_tap(idx)">
						  <div class="justify-content" style="width:10%">
						  	<i class="icon icon-rdouser-fill size24 option_icon"  style="color:blue;" v-show="option.self"></i>
						  </div>
						  <div class="justify-content" style="width:75%">
						  	<span class="button radius8 option_button block" style="word-break:normal">{{option.option}}</span>
						  </div>
						  <div class="justify-content" style="width:10%">
						    <i class="icon icon-rdouser-fill size24 option_icon" style="color:red;" v-show="option.enemy"></i>
						  </div>
						</li>
						</ul>
						</div>
						
						<div id="message"></div>
					</div>
				</article>
				<article id="article_serv"  data-role="article" data-transition="slide" data-scroll="verticle" class="art_mid" >
					<div class="scroller">
						pageserv
					</div>
				</article>
				<article id="article_conf" data-role="article" data-transition="slide" data-scroll="verticle" class="art_mid" >
					<div class="scroller">
						pageconfig
					</div>
				</article>
				<footer>
					<ul class="menubar" style="line-height: 40px;">
						<li class="tab active" data-role="tab" href="#article_main" data-toggle="article">
							<label class="text-center">首页</label>
						</li>
						<li class="tab " data-role="tab"  href="#article_serv" data-toggle="article">
							<label class="text-center">服务</label>
						</li>
						<li class="tab " data-role="tab"  href="#article_conf" data-toggle="article">
							<label class="text-center">设置</label>
						</li>
					</ul>
				</footer>
			</section>
		</div>
		<script src="../assets/third/amd/require.js" ></script>
		<script src="../assets/app/js/app.require.js"></script>
		<script src="../assets/third/util/codeHandler.js"></script>
		<script>
		    var quest_base = []
		    var cur_quest_idx = 0
		    var room_id = ""
			require(['vue', 'agile'], function(Vue) {//生成从minNum到maxNum的随机数
				var quest_VM = new Vue({
					el:"#question_main",
					data:{
						quest_bean:{
						   id:"",
						   idx:"",
						   title:"题干描述",
						   score:0,
						   limit_time:10,
						   options:[
						     {id:0,option:"选项asdasdas选项选项选项dasdasdasdasdasdasdasdas选项asdasdas选项选项选项dasddasd",self:false,enemy:false},
						     {id:1,option:"选项",self:false,enemy:false},
						     {id:2,option:"选项",self:false,enemy:false},
						     {id:3,option:"选项",self:false,enemy:false}]
						},
						show_answer:true
					},
					methods:{
						initVm:function(data,in_idx){
							var olist = eval("("+JSON.stringify(data.options)+")")
							this.quest_bean = data
							this.quest_bean.options = []
							for(key in olist){
								olist[key].self = false
								olist[key].enemy = false
								this.quest_bean.options.push(olist[key])
							}
							this.show_answer = false
						},
						on_tap:function(sel_idx,data){
						  if(!this.show_answer){
						     this.self_select(sel_idx)
					         commitAnser(this.quest_bean,sel_idx)
					         this.show_answer=true
						  }
                          return false
						},
						self_select:function(idx){
							this.quest_bean.options[idx].self = true
						},
						enemy_select:function(idx){
							this.quest_bean.options[idx].enemy = true
						}
					}
				})
				
				var randomNum = function(minNum, maxNum) {
					switch(arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
					}
				}
				var names = ['待定','张三', '李四', '王五', '赵四', '本山', '李白', '泰森', '乔丹', '孔明', '曹操']
				var userid = randomNum(1, 10)
				//题库id
				var bank_id = 1
				$('#selfname').html(names[userid])
				$('#enemyname').html(names[0])
				//题库
				var bank_info = {
					bank_id : '0',
					quet_list : []
				}
				var quest_info = {
					id : '0',
					title : '题目1',
					options : [{
						id : '0',
						option : '选项1',
						is_correct : 0
					}, {
						id : '1',
						option : '选项2',
						is_correct : 0
					}, {
						id : '2',
						option : '选项3',
						is_correct : 1
					}, {
						id : '3',
						option : '选项4',
						is_correct : 0
					}]
				}

				var commitAnser = function(quest_bean,sel_idx) {
					//alert(idx)
					var msg = {}
					msg.type = 1
					msg.roomid = room_id
					msg.userid = userid
					msg.option = sel_idx
					msg.quest_idx = quest_bean.idx
					msg.quest_id = quest_bean.quest_id
					msg.scored = quest_bean.score
					websocket.send(JSON.stringify(msg));
				}
				var websocket = null;
				//判断当前浏览器是否支持WebSocket
				if ('WebSocket' in window) {
					var param = {}
					param.userid = userid
					param.bankid = bank_id
					//websocket = new WebSocket("ws://"+location.host+"/KOB/VSStocket?" + codeHandler.encode64(JSON.stringify(param)));
					websocket = new WebSocket("ws://172.16.4.74:8080/KOB/VSStocket?" + codeHandler.encode64(JSON.stringify(param)));
				} else {
					alert('当前浏览器 Not support websocket')
				}

				//连接发生错误的回调方法
				websocket.onerror = function() {
					setMessageInnerHTML("WebSocket连接发生错误");
				};

				//连接成功建立的回调方法
				websocket.onopen = function(event) {
					//setMessageInnerHTML(JSON.stringify(event));
					setMessageInnerHTML("WebSocket连接成功");
				}
				//接收到消息的回调方法
				websocket.onmessage = function(event) {
					var ret = eval("(" + event.data + ")")
					if (ret.type == 'play') {
						quest_VM.enemy_select(ret.option)
					}else if(ret.type == 'sys'){
						if(ret.info == 'wait'){
							room_id = ret.roomid
							setMessageInnerHTML('等待对手！')
						}else if(ret.info == 'start'){
							if(room_id.length==0){
								room_id = ret.roomid
							}
							var players = ret.players
							for(key in players){
								if(players[key]!=userid)
				                  $('#enemyname').html(names[players[key]])
							}
							quest_base = ret.quests
							//初始化第一题
							quest_VM.initVm(quest_base[0],0)
							//setMessageInnerHTML(JSON.stringify(quest_base))
						}else if(ret.info == 'next'){
							cur_quest_idx++
							quest_VM.initVm(quest_base[cur_quest_idx],cur_quest_idx)
						}else if(ret.info == 'finish'){
							alert('答题结束！')
							//关闭链接
							closeWebSocket();
						}
					}
				}
				//连接关闭的回调方法
				websocket.onclose = function() {
					setMessageInnerHTML("WebSocket连接关闭");
				}
				//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
				window.onbeforeunload = function() {
					closeWebSocket();
				}
				//将消息显示在网页上
				function setMessageInnerHTML(innerHTML) {
					document.getElementById('message').innerHTML += innerHTML + '<br/>';
				}

				//关闭WebSocket连接
				function closeWebSocket() {
					websocket.close();
				}

			});
		</script>
	</body>
</html>